import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import s from './style.module.less'
import { List } from "zarm";
import CustomIcon from "../CustomIcon";
import PropTypes from 'prop-types'
import { typeMap } from '@/utils'
import dayjs from 'dayjs'

const BillItem = ({ bill }) => {
    const [income, setIncome] = useState(0)
    const [expense, setExpense] = useState(0)
    const navigateTo = useNavigate()

    useEffect(() => {
        const _income = bill.bills.filter(i => i.pay_type == 2).reduce((curr, item) => {
            curr += Number(item.amount)
            return curr
        }, 0);
        setIncome(_income)
        const _expense = bill.bills.filter(i => i.pay_type == 1).reduce((curr, item) => {
            curr += Number(item.amount)
            return curr
        }, 0);
        setExpense(_expense)
    }, [bill.bills])

    // 账单详情
    const goToDetail = (item) => {
        navigateTo(`/detail?id=${item.id}`)
    }

    return <div className={s.item}>
        <div className={s.headerData}>
            <div className={s.date}>{bill.date}</div>
            <div className={s.money}>
                <span>
                    <img src="//s.yezgea02.com/1615953405599/zhi%402x.png" alt='支' />
                    <span>¥{expense.toFixed(2)}</span>
                </span>
                <span>
                    <img src="//s.yezgea02.com/1615953405599/shou%402x.png" alt="收" />
                    <span>¥{income.toFixed(2)}</span>
                </span>
            </div>
        </div>
        <List>
            {
                bill && bill.bills.map(item => <List.Item 
                        className={s.bill}
                        key={item.id}
                        onClick={() => goToDetail(item)}
                        title = {
                            <>
                                <CustomIcon 
                                    className={s.itemIcon}
                                    type={item.type_id ? typeMap[item.type_id].icon : 1}
                                />
                                <span>{item.type_name}</span>
                            </>
                        }
                        suffix={<span style={{ color: item.pay_type == 2 ? 'red' : '#39be77' }}>{`${item.pay_type == 1 ? '-' : '+'}${item.amount}`}</span>}
                        description={<div>{dayjs(Number(item.date)).format('HH:mm')} {item.remark ? `| ${item.remark}` : ''}</div>}
                        >
                    </List.Item>)
            }    
        </List>       
    </div>
}

BillItem.propTypes = {
    bill: PropTypes.object
  };
  
  export default BillItem;